<template>
  <el-dialog
    title="新增员工"
    :visible="isShow"
    @close="close"
  >

    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="姓名:" prop="username">
        <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机:" prop="mobile">
        <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="入职时间:" prop="timeOfEntry">
        <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
      </el-form-item>
      <el-form-item label="聘用形式:" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择">
          <el-option 
          v-for="item of EmployeeEnum.hireType" 
          :key="item.id"
          :label="item.value"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号:" prop="workNumber">
        <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="部门:" prop="departmentName">
        <el-input 
        @focus="getDepartments" 
        v-model="formData.departmentName" 
        style="width:50%" 
        placeholder="请选择部门" 
        />
        <el-tree 
        v-loading="loading" 
        :data="timeOfEntryList" 
        v-show="isShowTree" 
        default-expand-all 
        :props="{label:'name'}"
        @node-click="onbtn"/>
      </el-form-item>
      <el-form-item label="转正时间:" prop="correctionTime">
        <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
      </el-form-item>
    </el-form>

    <!-- 按钮栏 -->
    <template #footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="close">取消</el-button>
          <el-button type="primary" size="small" @click="btn">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { addEmployee } from "@/api/employees";
import EmployeeEnum from '@/api/constant/employees'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'addEmployee',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      EmployeeEnum,
      formData: {
        username: '', // 姓名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 组织名称
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      }, // 表单数据
      rules: {
        username: [{ required: true, message: "用户姓名不能为空", trigger: 'blur' },
        { mix: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }],
        mobile: [{ required: true, message: "手机号不能为空", trigger: 'blur' },
          {
            // pattern 为正则 正则通过为真 不通过为假 
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }],
        formOfEmployment: [{ required: true, message: "聘用形式不能为空", trigger: 'blur' }],
        workNumber: [{ required: true, message: "工号不能为空", trigger: 'blur' }],
        departmentName: [
          /**
           * 这里不能失去焦点进行判断
           * 因为一旦获取点击获取到值，但同时也失去焦点
           * 所以会一直报部门为空的错误
           * 我们只能改为一旦修改值才进行判断
           */ 
          { required: true, message: "部门不能为空", trigger: 'change' }
        ],
        timeOfEntry: [{ required: true, message: "入职时间", trigger: 'blur' }],
      }, // 表单校验规则
      timeOfEntryList: [], // 树形结构的数据
      isShowTree: false, // 部门的状态
      loading: false // 加载的状态
    }
  },
  methods: {
    async getDepartments() {
      this.loading = true
      const { depts } = await getDepartments()
      this.timeOfEntryList = tranListToTreeData(depts, '')
      this.isShowTree = true
      this.loading = false
    },
    async btn() {
      try {
        await this.$refs.form.validate()
        await addEmployee(this.formData)
        // this.$parent 获取父组件的实例
        this.$parent.getEmployeeList()
        this.$message.success('添加成功')
        this.$emit('update:isShow',false)
      } catch (error) {
        console.log(error);
      }
    },
    onbtn(node) {
      // console.log(node);
      this.formData.departmentName = node.name
      this.isShowTree = false
    },
    close() {
      this.formData = {
        username: '', // 姓名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 组织名称
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      }
      this.$refs.form.resetFields()
      this.$emit('update:isShow',false)
    }
  }
}
</script>

<style scoped>

</style>